<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.js"></script>

<script>
    const oldtoc = document.getElementById('toctitle').nextElementSibling;
    const newtoc = document.createElement('div');
    newtoc.setAttribute('id', 'tocbot');
    newtoc.setAttribute('class', 'js-toc');
    oldtoc.parentNode.replaceChild(newtoc, oldtoc);
    tocbot.init({ contentSelector: '#content',
        headingSelector: 'h2, h3, h4',
        smoothScroll: false
    });
    const handleTocOnResize = function() {
        const width = window.innerWidth
                    || document.documentElement.clientWidth
                    || document.body.clientWidth;
        if (width < 768) {
            tocbot.refresh({
                contentSelector: '#content',
                headingSelector: 'h2, h3, h4',
                collapseDepth: 6,
                activeLinkClass: 'ignoreactive',
                throttleTimeout: 1000,
                smoothScroll: false
            });
        }
        else {
            tocbot.refresh({
                contentSelector: '#content',
                headingSelector: 'h2, h3, h4',
                smoothScroll: false
            });
        }
    };
    window.addEventListener('resize', handleTocOnResize);
    handleTocOnResize();
</script>